<template>
	<view class="content">
		<image src="/static/images/bg-2.gif" mode="" class="bg"></image>
		<image src="/static/images/logo.webp" mode="" class="logo"></image>
		<view class="user-name">
			<image src="/static/images/user.png" mode=""></image>
			<input type="text" value="" placeholder="用户名/手机号" />
		</view>
		<view class="user-pwd">
			<image src="/static/images/mima.png"></image>
			<input :type="category" placeholder="密码" />
			<image :src="pic" @click="show=!show"></image>
		</view>
		<view class="btn" hover-class="active">登录</view>
		<view class="account">
			<view hover-class="active">忘记密码？</view>
			<view hover-class="active">立即注册</view>
		</view>
		<view class="footer">
			<view class="footer-sup">
				<view class="line"></view>
				<view>第三方直接登录</view>
				<view class="line"></view>
			</view>
			<view class="footer-sub">
				<image src="../../static/images/qq.jpg" mode=""></image>
				<image src="../../static/images/wx.jpg" mode=""></image>
				<image src="../../static/images/wb.jpg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show:false
		}
	},
	computed:{
		category(){
			return this.show?'text':'password';
		},
		pic(){
			return this.show?'/static/images/eye.png':'/static/images/eye-close.png'
		}
	}
};
</script>

<style scoped lang="scss">
.content{
	padding: 20rpx;
	display: flex;
	// 排列方式,垂直
	flex-direction: column;
}
.bg{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	// 滤镜,模糊效果
	filter: blur(2px);
	z-index: 0;
}
.logo{
	width: 300rpx;
	height: 300rpx;
	border-radius: 50%;
	// flex主轴自居中
	align-self: center;
	background-color: #FFFFFF;
	margin: 50rpx;
}
.user-name{
	display: flex;
	background-color: #FFFFFF;
	z-index: 1;
	margin: 50rpx;

	>image{
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
	}
	>input{
		height: 90rpx;
	}
}
.user-pwd{
	display: flex;
	background-color: #FFFFFF;
	z-index: 1;
	margin:0 50rpx;
	justify-content: space-between;
	>image{
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
	}
	>input{
		height: 90rpx;
		margin-left: -90rpx;
		background-color: #007AFF;
	}
}
.btn{
	margin: 50rpx;
	background-color: rgb(255,165,7);
	z-index: 1;
	height: 90rpx;
	font-size: 34rpx;
	border-radius: 5rpx;
	text-align: center;
	line-height: 90rpx;
}
.account{
	z-index: 1;
	display: flex;
	justify-content: space-between;
	margin: 0 50rpx;
	>view{
		text-decoration: underline;
	}
}
.active{
	opacity: 0.6;
}
.footer{
	z-index: 1;
	position: fixed;
	left: 0;
	bottom: 0;
		.footer-sup{
			display: flex;
			align-items: center;
			justify-content: space-around;
			color: #FFFFFF;
			margin: 100rpx 50rpx 10rpx 50rpx;
			.line{
				height: 1px;
				background-color: #222;
				width: 200rpx;
			}
		}
		.footer-sub{
			margin:0 100rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 120rpx;
			>image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	
}
</style>
